import React, {Component} from 'react';
import {
    View,
    Text,
    WebView,
    BackHandler
} from 'react-native';

/**
 * 没法上传文件
 * todo 关闭播放
 */
export default class WebPage extends Component {
    static navigationOptions = ({navigation}) => {
        this.state={
            url: undefined,
            title: undefined
        };
        try {
            this.state.title = navigation.state.params.title;
        }catch (err){
        }
        try {
            this.state.url = navigation.state.params.url;
        }catch (err){
        }
        //=====================
        if (this.state.url === undefined && this.state.title === undefined){
            return {
                title: "网址出错"
            };
        }else if(this.state.title !== undefined ){
            return {
                title: this.state.title
            };
        }else{
            return {
                header: null
            };
        }
    };
    constructor(props){
        super(props);
        this.state={
            url: undefined,
            title: undefined,
            isBackButtonEnable: false
        };
        try {
            if (!this.state.title){
                this.state.title = props.title;
            }
            if (!this.state.title){
                this.state.title = props.navigation.state.params.title;
            }
        }catch (err){
        }
        try {
            if (!this.state.url){
                this.state.url = props.url;
            }
            if (!this.state.url){
                this.state.url = props.navigation.state.params.url;
            }
        }catch (err){
        }
    }

    _goback = () => {
        if (this.state.isBackButtonEnable){
            this.refs._web.goBack();
        }
        return this.state.isBackButtonEnable;
    };
    componentWillMount(){
        BackHandler.addEventListener("goback",this._goback);
    }
    render() {
        if (this.state.url === undefined){
            return <View style={{flex: 1, justifyContent: "center", alignItems: "center"}}>
                <Text style={{fontSize: 20}}>
                    网址出错
                </Text>
            </View>;
        }else{
            return <WebView
                ref="_web"
                source={{uri:this.state.url}}
                javaScriptEnabled={true}
                automaticallyAdjustContentInsets={true}
                domStorageEnabled={true}
                scalesPageToFit={true}
                renderLoading={()=>{
                    return <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
                        <Text style={{fontSize:20}}>
                            努力加载中...
                        </Text>
                    </View>;
                }}
                onMessage={(msg)=>{
                    console.log(msg);
                }}
                startInLoadingState={true}
                onNavigationStateChange={this._onNavigationStateChange.bind(this)}
            />;
        }
    }
    //WebView导航状态改变
    _onNavigationStateChange(navState) {
        this.setState({
            title: navState.title,
            isBackButtonEnable: navState.canGoBack,
        })
    }
    componentWillUnmount(){
        BackHandler.removeEventListener("goback",this._goback);
    }
}